@import "styles/common.scss";

.avatar {
	width: 100%;
	padding: 10px 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	.avatarContent {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	.avatarImg {
		border-radius: 100%;
		overflow: hidden;
		border: 8px solid #f5f5f5;
	}

	.avatarImg > img {
		width: 125px;
		height: 125px;
		float: left;
	}

	.accountInfo {
		flex: 1;
		padding: 20px;

		> p {
			margin-bottom: 8px;
			font-size: 20px;
			color: $wordColor;

			&:first-child {
				font-size: 32px;
				font-weight: bold;
			}
		}
		> .description {
			font-size: 12px;
		}
		> .navigator {
			@extend .description;
			color: #274554;
		}
	}
}
